<!-- 新增认证流程 -->

<template>
  <a-modal
    width="auto"
    v-model:visible="modalVisible"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <template #title> {{ props.title }} </template>
    <a-space :size="70" direction="vertical" fill>
      <div>
        <a-form :model="form" auto-label-width>
          <a-row :gutter="24">
            <a-col :span="24">
              <a-form-item field="roleName" label="认证流程名称:">
                <a-input
                  placeholder="请输入名称"
                  v-model="form.Name"
                  allow-clear
                ></a-input> </a-form-item></a-col
          ></a-row>
          <a-row :gutter="24">
            <a-col :span="24">
              <a-form-item field="roleCode" label="流程内容：">
                <div
                  v-for="(item, index) in data"
                  :key="item.key"
                  style="margin: 5px"
                >
                  <a-space>
                    <a-select
                      v-model="item.value"
                      placeholder="Please select ..."
                    >
                      <a-option
                        v-for="element in rdata"
                        :key="element.id"
                        :value="element.id"
                        >{{ element.name }}</a-option
                      >
                    </a-select>
                    <a-button
                      v-if="index > 0"
                      type="text"
                      status="danger"
                      @click="delContent(index)"
                    >
                      <template #icon>
                        <icon-close style="color: red" />
                      </template>
                      删除
                    </a-button>
                  </a-space>
                </div>
                <a-button type="text" @click="addContent()">
                  <template #icon>
                    <icon-plus />
                  </template>
                  添加项目
                </a-button>
              </a-form-item></a-col
            ></a-row
          >
        </a-form>
      </div>
    </a-space>
  </a-modal>
</template>

<script lang="ts" setup>
  import { reactive, computed, ref, watchEffect } from 'vue';
  import { cloneDeep } from 'lodash';
  import { getSupplierauth } from '@/api/buy-management/supplier-management/base-setting/index';

  const props = withDefaults(
    defineProps<{
      title: string;
      formList: any;
      visible: boolean;
    }>(),
    {
      visible: false,
    }
  );

  const emit = defineEmits(['update:visible', 'addprocess']);

  let form = ref(cloneDeep(props.formList));

  // 判断用户是否显示弹出框
  const modalVisible = computed({
    get() {
      return props.visible;
    },
    set(visible: boolean) {
      emit('update:visible', visible);
    },
  });

  const rdata = ref();
  const rData = async () => {
    const res = await getSupplierauth();
    rdata.value = res.projectAuth;
  };
  rData();

  const data = ref([{ key: '0', value: '' }]);
  const num = ref(0);

  const addContent = () => {
    data.value.push({ key: `${(num.value += 1)}`, value: '' });
  };

  const delContent = (index: any) => {
    data.value.splice(index, 1);
  };

  const rules = reactive({});

  // 确定
  const content = ref();
  const handleOk = () => {
    let ccc = ref([]);
    data.value.forEach((item) => {
      ccc.value.push(item.value);
    });
    content.value = ccc.value.join('-');
    if (props.title === '新增认证流程') {
      emit(
        'addprocess',
        { name: form.value.Name, description: content.value },
        'add'
      );
    } else {
      emit(
        'addprocess',
        {
          name: form.value.Name,
          description: content.value,
          id: form.value.id,
        },
        'edit'
      );
    }
    modalVisible.value = false;
  };

  // 取消
  const handleCancel = () => {
    modalVisible.value = false;
  };

  const ccc = (val) => {
    let Data = val.Des.split('+');
    data.value = [];
    Data.forEach((i) => {
      rdata.value.forEach((Element, index) => {
        if (Element.name === i) {
          data.value.push({ key: `${index}`, value: Element.id });
        }
      });
    });
    // rData();
  };

  watchEffect(() => {
    if (props.title === '新增认证流程') {
      form.value = cloneDeep(props.formList);
      content.value = '';
      data.value = [{ key: '0', value: '' }];
    } else if (props.title === '编辑认证流程') {
      form.value = cloneDeep(props.formList);
      content.value = '';
      ccc(form.value);
    }
  });
</script>

<style scoped lang="less"></style>
